<template>
	<view class="note">
		<view :class="['note-item',item.ReadTime > 0 ? 'read':''] " v-for="(item, index) in list" :key="index"
			@click="$goPage('/note/inform/detail',{sid:item.Sid})">
			<view class="note-item_header u-flex">
				<view class="note-state">
					<text class="icon icon-tongzhi1"></text>
					<u-badge :is-dot="true" type="error" :offset="[-8,-8]"></u-badge>
				</view>
				<!-- 	<view class="u-flex note-item_title">{{item.Title}}</view> -->
				<view class="u-flex note-item_title" v-if="item.BizType == 21">{{$t('chat.request_friend')}}</view>
				<view class="u-flex note-item_title" v-else-if="item.BizType == 22">{{$t('chat.request_friend_notify')}}
				</view>
				<view class="u-flex note-item_title" v-else>{{item.Title}}</view>
				<u-tag v-if="item.DealType == 2" :text="$t('chat.stat_ignored')" mode="plain" type="info" size="mini" />
				<u-tag v-if="item.DealType == 1" :text="$t('chat.stat_agreed')" mode="plain" type="primary" size="mini" />
			</view>
			<view class="note-item_txt">
				<text v-if="item.Title == $t('chat.request_friend')">{{$t('chat.user_iam')}} </text>
				<text v-else-if="item.BizType == 21">{{$t('chat.user_iam')}} </text>
				{{item.Content}}
				<text v-if="item.Title == $t('chat.request_friend_notify') && item.DealType == 2"> {{$t('chat.stat_ignored')}}
				</text>
				<text v-if="item.Title == $t('chat.request_friend_notify') && item.DealType == 1"> {{$t('chat.stat_agreed')}}
				</text>
			</view>
			<view class="note-item_time">{{item.AddTimeText}}</view>
		</view>
		<u-loadmore :status="status" :icon-type="iconType" :load-text="loadText" margin-bottom="45" margin-top="45"
			color="#C1C0C0" />

		<view class="more-action" v-if="isMore">
			<view class="more-action_item" @click="isReaded = true">{{$t('chat.btn_read_all')}}</view>
			<view class="more-action_item" @click="isDeleted = true">{{$t('chat.btn_del_all')}}</view>
		</view>
		<u-modal v-model="isReaded" :show-cancel-button="true" :show-title="false" cancelText="取消" confirmText="确认"
			content="确定将所有通知标为已读吗" @cancel="cancelModal" @confirm="actRead
		"></u-modal>
		<u-modal v-model="isDeleted" :show-cancel-button="true" :show-title="false" cancelText="取消" confirmText="确认"
			content="确定删除所有通知吗" @cancel="cancelModal" @confirm="actDelete"></u-modal>
	</view>
</template>

<script>

	import pageMixin from '@/utils/pageMixin';
	export default {
		mixins: [pageMixin],
		data() {
			return {
				msgType: 0,
				unreadTotal: 0,
				list: [],
				status: 'nomore',
				iconType: 'flower',
				loadText: {
					loadmore: this.$t('chat.pull_up'),
					loading: this.$t('chat.loading'),
					nomore: this.$t('chat.note_no_more'),
				},
				isMore: false,
				isReaded: false,
				isDeleted: false,
			}
		},

		onLoad(option) {
			uni.setNavigationBarTitle({
				title: this.$t('chat.notice_title')
			});
			this.msgType = option.type || 0;
			this.unreadTotal = option.unreadTotal || 0;
			console.log("this.unreadTotal", this.unreadTotal)
		},
		onShow() {
			this.getList();
		},
		components: {},
		computed: {
			i18n() {
				return this.$t('chat')
			}
		},
		methods: {
			getList() {
				let that = this;
				that.$http.get('/msg/system/list/data', {
					type: that.msgType
				}).then(res => {
					if (res.length === 0) {
						that.list = []
					}
					that.updateSystemNotifyMsgUnread()
					for (let i = 0; i < res.length; i++) {
						let type = res[i].Type || 0;
						let bizType = res[i].BizType || 0;
						let content = res[i].Content;
						if (that.$t('chat.msg_title_'+ bizType) !== undefined) {
							res[i].Title = that.$t('chat.msg_title_'+ bizType);
							console.log("res[i].Title", res[i].Title)
						}
						if (that.$t('chat.msg_content_'+ bizType)!== undefined) {
							if (that.$t('chat.msg_content_'+ bizType)!== undefined && type != 2) {
								//let number = res[i].Content.replace(/[^0-9]/ig, "");
								let number = (res[i].Content.match(/\d+个工程/g) + "").match(/\d+/g);
								content = that.$t('chat.msg_content_'+ bizType);
								if (uni.getStorageSync('lang')== '中文') {
									content = content.replace('[projectName]', res[i].ProjectName)
								} else {
									content = content.replace('[projectName]', res[i].ShipName)
								}
								content = content.replace('[userName]', res[i].ExtDataJson.AddAccName || '')
								content = content.replace('[groupName]', "【" + res[i].ExtDataJson.group_name +
									"】" || '')
								content = content.replace('[userName]', res[i].ExtDataJson.user_name || '')
								content = content.replace('[number]', number)
								res[i].Content = content;
							}

							//确认结果状态，2：确认、3：驳回
							let stat = res[i].ExtDataJson.Stat || 0;
							//alert(res[i].ExtDataJson.stat+"-----"+stat);
							if (stat == 3) {
								let rejectRmk = res[i].ExtDataJson.RejectRmk || '';
								if (rejectRmk != '') {
									content = content.replace('[rejectRmk]', rejectRmk)
									res[i].Content = content;
								}
							} else if (stat == 2) {
								if (that.$t('chat.msg_content_'+ bizType +'_confirm') !== undefined) {
									//let number = res[i].Content.replace(/[^0-9]/ig, "");
									let number = (res[i].Content.match(/\d+个工程/g) + "").match(/\d+/g);
									let content = that.$t('chat.msg_content_'+ bizType +'_confirm');
									if (uni.getStorageSync('lang') == '中文') {
										content = content.replace('[projectName]', res[i].ProjectName)
									} else {
										content = content.replace('[projectName]', res[i].ShipName)
									}
									content = content.replace('[userName]', res[i].ExtDataJson.AddAccName || '')
									content = content.replace('[number]', number)
									res[i].Content = content;
								}
							}
						}
						that.list = res
					}
				})
			},
			cancelModal() {
				this.isMore = false;
			},
			filterUid(extdata) {
				var data = JSON.parse(extdata)
				return data
			},
			actRead() {
				this.isMore = false;
				this.isReaded = false;
				console.log(this.msgType)
				this.$http.get('/msg/system/read', {
					type: this.msgType,
					type :2,
				}).then(res => {
						console.log(this.msgType)
					this.getList()
				})
			},
			actDelete() {
				this.isMore = false;
				this.isDeleted = false;
				this.$http.get('/msg/system/delete', {
					msgType: this.msgType,
					type :2,
				}).then(res => {
					this.getList();
				})
			},
			updateSystemNotifyMsgUnread() {
				let unreadTotal = this.unreadTotal
				this.$http.get('/msg/system/type/count').then(res => {
					unreadTotal += res.totalCount
					let msgCountTotal = 0
					msgCountTotal += res.count2
					msgCountTotal += this.unreadTotal
					uni.setStorageSync('systemNotifyMsgUnread', unreadTotal)
					if (unreadTotal > 0) {
						if (unreadTotal > 99) {
							unreadTotal = '99+'
						}
						plus.runtime.setBadgeNumber(unreadTotal)
					} else {
						plus.runtime.setBadgeNumber(0)
					}
					if (msgCountTotal > 0) {
						uni.setTabBarBadge({
							index: 2,
							text: msgCountTotal.toString()
						});
					} else {
						uni.removeTabBarBadge({
							index: 2
						});
					}
				});
			},
		},
		onNavigationBarButtonTap(e) {
			if (e.type == 'close') {
				this.$u.route({
					type: 'back',
					delta: 1
				});
				return;
			}
			if (e.type == 'menu' && !this.publishButoonDisable) {
				this.isMore = !this.isMore;
			}
		},
	}
</script>

<style lang="scss" scoped>
	.note {
		position: relative;
		padding: 20rpx 30rpx;

		&-item {
			background-color: #fff;
			padding: 20rpx;
			margin-bottom: 20rpx;
			border-radius: 10rpx;

			&_header {
				font-size: 30rpx;
				color: #131313;
				padding-bottom: 20rpx;
				border-bottom: 1rpx solid rgba(210, 210, 210, .5);

				.note-state {
					position: relative;
					margin-right: 15rpx;
					color: #7F7F7F;
				}
			}

			&_title {
				margin-right: 6rpx;
			}

			&_txt {
				margin: 34rpx 0;
				font-size: 28rpx;
				color: #666666;
				line-height: 44rpx;
			}

			&_time {
				text-align: right;
				font-size: 26rpx;
				color: #666666;
				margin-bottom: 10rpx;
			}
		}

		.note-item.read {
			opacity: .5;

			.u-badge {
				display: none;
			}
		}

		.more-action {
			z-index: 9999;
			position: fixed;
			right: 20rpx;
			top: 16rpx;
			padding: 20rpx 30rpx;
			background: #313131;
			border-radius: 10rpx;

			&_item {
				font-size: 30rpx;
				color: #FFFFFF;
				line-height: 2;
			}

			&::after {
				position: absolute;
				top: -15rpx;
				right: 24rpx;
				content: '';
				width: 0;
				height: 0;
				border-left: 12rpx solid transparent;
				border-right: 12rpx solid transparent;
				border-bottom: 16rpx solid #313131;
			}
		}
	}
</style>
